<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap-movie.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/animate.css">
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
</head>

<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.jsp" class="navbar-brand" style="width:250px;">
                <img src="${pageContext.request.contextPath}/resource/static/base/images/logo.png" style="height:30px;">&nbsp;微电影
            </a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <%@include file="includetop.jsp"%>
        <!--导航-->

    </div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:76px">
    <div class="col-md-3">
        <div class="list-group">
            <a href="/person/toUserInformation" class="list-group-item">
                <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
            </a>
            <a href="/person/updatePassword" class="list-group-item">
                <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
            </a>
            <a href="/comment/adminComment/${personName}" class="list-group-item active">
                <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
            </a>
            <a href="/person/getlogs" class="list-group-item">
                <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
            </a>
            <a href="/admin/adminFavoriteVideosId/${sessionScope.userId}" class="list-group-item">
                <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
            </a>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;评论记录</h3>
            </div>
            <div class="panel-body">
                <ul class="commentList" id="commentList">
                    <c:forEach items="${pageInfo.list}" var="pageInfo">
                        <li class="item cl">
                            <a href="user.jsp">
                                <i class="avatar size-L radius">
                                    <c:choose>
                                        <c:when test="${pageInfo.personImage!=null and pageInfo.personImage!=''}">
                                            <img alt="50x50" src="${pageContext.request.contextPath}/resource/static/base/person/${pageInfo.personImage}" class="img-circle" style="border:1px solid #abcdef; width: 50px; height: 50px;">
                                        </c:when>
                                        <c:otherwise>
                                            <img alt="50x50" src="${pageContext.request.contextPath}/resource/static/admin/dist/img/user3-128x128.jpg" class="img-circle" style="border:1px solid #abcdef; width: 50px; height: 50px;">
                                        </c:otherwise>
                                    </c:choose>

                                </i>
                            </a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta">
                                        <a class="comment-author" href="user.jsp">${pageInfo.personName}</a>
                                        &nbsp;评论于
                                        <time title="2016-12-07 09:12:51"
                                              datetime="2016-12-07 09:12:51">${pageInfo.addtime}</time>
                                  <a style="float: right;"> 电影:《${pageInfo.videoName}》</a>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>${pageInfo.commentContent}</p>
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
                <div class="col-md-12 text-center" id="textcenter">
                    <ul class="pagination pagination-sm no-margin pull-right" >
                        <li><a href="#" onclick="doGetComment(1)">首页</a></li>
                        <li>
                            <c:choose>
                                <c:when test="${pageInfo.isFirstPage}">
                                    <a href="javascript:void(0)" onclick="doGetComment(1)"
                                       aria-label="上一页"><span
                                            aria-hidden="true">上一页</span></a>
                                </c:when>
                                <c:otherwise>
                                    <a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pageNum - 1})"
                                       aria-label="上一页"><span
                                            aria-hidden="true">上一页</span></a>
                                </c:otherwise>
                            </c:choose>
                        </li>
                        <c:choose>
                        <c:when test="${pageInfo.total!=0}">
                        <li>
                            <a href="javascript:void(0)" id="pageNum"
                            >${pageInfo.pageNum}/${pageInfo.pages}
                            </a></li>
                        <li>
                            </c:when>
                            <c:otherwise>
                        <li>
                            <a href="javascript:void(0)" id="pageNum">${pageInfo.pages}/${pageInfo.pages}
                            </a></li>
                        <li>
                            </c:otherwise>
                            </c:choose>
                            <c:choose>
                                <%--如果当前页和最大页数相等，说明是最后一页，下一页就不能加1；否则就加1--%>
                            <c:when test="${pageInfo.pageNum >= pageInfo.pages}">
                        <li data-name="nextPage">
                            <a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pages})"
                               aria-label="下一页"><span
                                    aria-hidden="true">下一页</span></a>
                        </li>
                        </c:when>
                        <c:otherwise>
                            <li data-name="nextPage">
                                <a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pageNum + 1})"
                                   aria-label="下一页"><span
                                        aria-hidden="true">下一页</span></a>
                            </li>
                        </c:otherwise>
                        </c:choose>
                        </li>
                        <li><a href="javascript:void(0)" onclick="doGetComment(${pageInfo.pages})"
                               aria-label="尾页">尾页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.singlePageNav.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/lazyload/jquery.lazyload.min.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script>
    $(function () {
        new WOW().init();
    })

</script>
<script>
    $(document).ready(function () {
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
    });

</script>
<script>
    //留言分页
    function doGetComment(page) {
        if (page == null) {
            page = 1;
        }

        //需要传递给后端参数，关键词，当前第几页page，每页多少个size
        var data = {

            "pageNum": page,
            "pageSize": 5,
        }
        $.ajax({
            url: "/comment/adminCommentList/${personName}",
            data: data,
            type: "get",
            dataType: "json",
            success: function (res) {
                //获取产品数据
                var commentList = res.data.list;
                //清除留言页信息
                $("#commentList").empty();
                // $(".box-body box-comments").text();
                //循环处理每条产品数据，把每次分页的信息加入到页面进行展示
                for (var i = 0; i < commentList.length; i++) {
                    updateCommentList(commentList[i]);
                }

                //分页页码的展示
                setCommentListPage(res.data);

            },
            error: function () {
                alert("小二正忙，一会再试");
            }
        })
    }

    //留言信息展示的方法
    function updateCommentList(comment) {
          var li= '<li class="item cl">'+
                            '<a href="user.jsp">'+
                                '<i class="avatar size-L radius">'+
                                    ' <img alt="50x50"' ;
        var li1=  'class="img-circle" style="border:1px solid #abcdef; width: 50px; height: 50px;">'+
                              '  </i>'+
                            '</a>'+
                            '<div class="comment-main">'+
                               ' <header class="comment-header">'+
                                  '  <div class="comment-meta">'+
                                        '<a class="comment-author" href="user.jsp">'+comment.personName+'</a>'+
                                     '&nbsp;&nbsp;评论于&nbsp;'+
                                        '<time title="2016-12-07 09:12:51"'+
                                             ' datetime="2016-12-07 09:12:51">'+comment.addtime+'</time>'+
                                        '<a style="float: right;">电影:《'+comment.videoName+'》</a>'+
                                   ' </div>'+
                                '</header>'+
                               ' <div class="comment-body">'+
                                   ' <p>'+comment.commentContent+'</p>'+
                                '</div>'+
                            '</div>'+
                        '</li>';
        if (comment.personImage != null&&comment.personImage !=="") {
            li = li+ 'src="${pageContext.request.contextPath}' + '/resource/static/base/person/' + comment.personImage + '"'+li1;
        } else {
            li = li + 'src="${pageContext.request.contextPath}' + '/resource/static/admin/dist/img/user3-128x128.jpg"'+li1;
        }
        $("#commentList").append(li);

    }
    //留言信息页码展示的方法
    function setCommentListPage(pageInfo) {
        var ul = $("#textcenter").children("ul")[0];
        $(ul).empty();
        var firstPage = '<li data-name="firstPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + 1 + ')" aria-label="首页"><span' +
            ' aria-hidden="true">首页</span></a>' +
            '</li>';

        var prePageNum = 0;
        if (pageInfo.pageNum <= 1) {
            prePageNum = 1;
        } else {
            prePageNum = pageInfo.pageNum - 1;
        }
        var prevPage = '<li data-name="prevPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + prePageNum + ')" aria-label="上一页"><span' +
            ' aria-hidden="true">上一页</span></a>' +
            '</li>';

        if (pageInfo.total > 0) {
            var pageThis = '<li class="pageThis">' +
                '<a href="javascript:void(0)" id="pageNum" title="' + pageInfo.pageNum + '">' + pageInfo.pageNum + '/' + pageInfo.pages + '</a>' +
                '</li>';
        } else {
            var pageThis = '<li class="pageThis">' +
                '<a href="javascript:void(0)" id="pageNum" title="' + pageInfo.pageNum + '">' + pageInfo.pages + '/' + pageInfo.pages + '</a>' +
                '</li>';
        }

        var nextPageNum = 0;
        if (pageInfo.pageNum >= pageInfo.pages) {
            nextPageNum = pageInfo.pages;
        } else {
            nextPageNum = pageInfo.pageNum + 1;
        }
        var nextPage = '<li data-name="nextPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + nextPageNum + ')" aria-label="下一页"><span' +
            ' aria-hidden="true">下一页</span></a>' +
            '</li>';

        var lastPage = '<li data-name="lastPage">' +
            ' <a href="javascript:void(0)" onclick="doGetComment(' + pageInfo.pages + ')" aria-label="尾页"><span' +
            ' aria-hidden="true">尾页</span></a>' +
            '</li>';
        $(ul).append(firstPage)
        $(ul).append(prevPage)
        $(ul).append(pageThis)
        $(ul).append(nextPage)
        $(ul).append(lastPage)

    }
</script>
</body>
</html>
